
<template>
<div  >
  <!-- 
    动态类名:
     语法：v-bind:class="{类名，布尔值}"
   -->
   <h1 v-bind:class="{ red: bool }">
    hello vue
   </h1>
   <button @click="handlerChange">点我修改字体颜色</button>
</div>
</template>
<script>
export default {
  data(){
    return {
      bool: true
    }
  },
  methods: {
    handlerChange(){
      this.bool = !this.bool
    }
  }
}
</script>
<style scoped>
.red{
  color: red;
}
</style>